<template>
  <view class="page">
    <view class="header">问诊咨询</view>

    <!-- 问诊表单 -->
    <view class="form">
      <input v-model="title" placeholder="请输入问题标题" />
      <textarea v-model="description" placeholder="请输入详细描述" />
      
      <picker mode="selector" :range="symptomCategories" v-model="selectedCategory">
        <view class="picker">
          <text>症状类别: {{ symptomCategories[selectedCategory] }}</text>
        </view>
      </picker>
      
      <button @click="submitConsultation">提交问诊</button>
    </view>

    <!-- 提交后的问诊列表 -->
    <view v-if="consultations.length > 0" class="consultation-list">
      <view v-for="consultation in consultations" :key="consultation.id" class="consultation">
        <view class="consultation-title">{{ consultation.title }}</view>
        <view class="consultation-body">{{ consultation.description }}</view>
        <view class="consultation-category">类别: {{ consultation.category }}</view>
        <button @click="goToAnswerPage(consultation.id)">查看回答</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',              // 问诊标题
      description: '',        // 问诊描述
      selectedCategory: 0,    // 选中的症状类别
      symptomCategories: ['请选择症状类别', '头痛', '咳嗽', '发热', '腹痛', '关节疼痛'], // 症状类别
      consultations: []       // 存储问诊记录
    };
  },
  methods: {
    submitConsultation() {
      if (this.title && this.description) {
        const newConsultation = {
          id: Date.now(),
          title: this.title,
          description: this.description,
          category: this.symptomCategories[this.selectedCategory]
        };
        this.consultations.push(newConsultation);
        this.title = '';
        this.description = '';
        this.selectedCategory = 0;
        uni.showToast({ title: '问诊已提交', icon: 'success' });
      } else {
        uni.showToast({ title: '标题和描述不能为空', icon: 'none' });
      }
    },
    goToAnswerPage(consultationId) {
      uni.navigateTo({ url: `/pages/consultation/answer?id=${consultationId}` });
    }
  }
};
</script>

<style scoped>
.page {
  padding: 10px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form input, .form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.picker {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

button {
  background-color: #3f8fe0;
  color: white;
  border-radius: 5px;
  padding: 10px 15px;
}

.consultation-list {
  margin-top: 20px;
}

.consultation {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.consultation-title {
  font-size: 18px;
  font-weight: bold;
}

.consultation-body {
  font-size: 14px;
  margin-top: 10px;
}

.consultation-category {
  font-size: 12px;
  margin-top: 10px;
  color: #999;
}
</style>
